<template>
    <div ref="fullpage">
        <slot></slot>
    </div>
</template>

<script>
import * as constants from './constants'

function camelToKebab(string) {
    return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
}

export default {
    props: {
        options: {
            type: Object,
            required: true
        },
        skipInit: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            events: constants.EVENTS.reduce((eventsHandlers, event) => {
                return {
                    ...eventsHandlers,

                    [event]: (...args) => {
                        this.emitEvent(event, args)
                    }
                }
            }, {}),
            api: undefined
        }
    },
    watch: {
        options: {
            deep: true,
            handler() {
                this.build()
            }
        }
    },
    mounted() {
        // import fullpage from 'fullpage.js/dist/fullpage.extensions.min'
        const fullpage = require('fullpage.js/dist/fullpage.extensions.min')
        if (typeof window !== 'undefined' && window.Vue) {
        }
        if (!window.fullpage_api) {
            window.fullpage = fullpage
        }
        !this.skipInit && this.init()
    },

    beforeDestroy() {
        if (typeof this.api !== 'undefined') {
            this.destroy()
        }
    },
    methods: {
        build() {
            console.log('build')
            const slideSelector = this.options.slideSelector || '.slide'
            const sectionSelector = this.options.sectionSelector || '.section'
            // eslint-disable-next-line no-undef
            const activeSectionIndex = fp_utils.index(
                document.querySelector(sectionSelector + '.active')
            )
            const activeSlide = document.querySelector(
                sectionSelector + '.active ' + slideSelector + '.active'
            )
            const activeSlideIndex = activeSlide
                ? // eslint-disable-next-line no-undef
                  fp_utils.index(activeSlide)
                : -1

            this.destroy()

            if (activeSectionIndex > -1) {
                // eslint-disable-next-line no-undef
                fp_utils.addClass(
                    document.querySelectorAll(sectionSelector)[
                        activeSectionIndex
                    ],
                    'active'
                )
            }

            if (activeSlideIndex > -1) {
                // eslint-disable-next-line no-undef
                fp_utils.addClass(activeSlide, 'active')
            }

            this.init()
        },
        destroy() {
            if (
                // eslint-disable-next-line camelcase
                typeof fullpage_api !== 'undefined' &&
                // eslint-disable-next-line no-undef
                typeof fullpage_api.destroy !== 'undefined'
            ) {
                // eslint-disable-next-line no-undef
                fullpage_api.destroy('all')
            }
        },
        emitEvent(name, args) {
            // Emit event on Vue way
            this.$emit(camelToKebab(name), ...args)

            // Run event's handler with non Vue way
            // eslint-disable-next-line no-prototype-builtins
            if (this.options.hasOwnProperty(name)) {
                this.options[name].apply(this, args)
            }
        },
        init() {
            // eslint-disable-next-line
        this.api = new fullpage(this.$refs.fullpage, this.options)
        }
    }
}
</script>
